<template>
  <div id="assessment-term" style="height: 100%">123</div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'AssessmentTerm',
  props: {
    legendData: {
      type: Array,
      default: [],
    },
    xAxisData: {
      type: Array,
      default: [],
    },
    series: {
      type: Array,
      default: [],
    },
  },
  watch: {
    xAxisData(val) {
      console.log(val)
    },
    series(val) {
      console.log('series---->>>', val)
    },
  },
  mounted() {
    this.setEchartColor(this.series)
    this.$nextTick(() => {
      this.getLInechart(this.xAxisData, this.series, this.legendData)
    })
  },
  data() {
    return {
      // 折线图颜色数组
      ColorSet: [
        '#c04851',
        '#f0a1a8',
        '#f97d1c',
        '#f8b37f',
        '#fecc11',
        '#e2d849',
        '#5bae23',
        '#5dbe8a',
        '#5cb3cc',
        '#93d5dc',
        '#0f59a4',
        '#5698c3',
        '#983680',
        '#c8adc4',
        '#847c74',
        '#bdaead',
      ],
    }
  },
  methods: {
    //随机生成颜色
    handleColors() {
      let color = ''
      let r = Math.floor(Math.random() * 256)
      let g = Math.floor(Math.random() * 256)
      let b = Math.floor(Math.random() * 256)
      color = `rgb(${r},${g},${b})`
      return color //所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
    },
    //设置图例颜色
    setEchartColor(series) {
      let index = 0
      for (let i of series) {
        // let color = this.handleColors()
        let color = this.ColorSet[index]
        index++
        console.log(color)
        i['itemStyle'] = { color: color }
      }
    },
    getLInechart(xAxisData, series, legendData) {
      console.log('series---->>>', series[0].tooltip.valueFormatter())
      var chartDom = document.getElementById('assessment-term')
      var myChart = echarts.init(chartDom)
      var option
      option = {
        title: {
          text: '任期考核指标',
          left: 'center',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
          transitionDuration: 0,
          position: function (point, params, dom, rect, size) {
            // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
            // 提示框位置
            var x = 0 // x坐标位置
            var y = 0 // y坐标位置

            // 当前鼠标位置
            var pointX = point[0]
            var pointY = point[1]
            // 提示框大小
            var boxWidth = size.contentSize[0]
            var boxHeight = size.contentSize[1]

            // boxWidth > pointX 说明鼠标左边放不下提示框
            if (boxWidth > pointX) {
              x = 5
            } else {
              // 左边放的下
              x = pointX - boxWidth
            }

            // boxHeight > pointY 说明鼠标上边放不下提示框
            if (boxHeight > pointY) {
              y = 5
            } else {
              // 上边放得下
              y = pointY - boxHeight
            }
            return [x, y]
          },
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
          right: '1%',
          top: '-2%',
        },
        grid: {
          show: true,
          left: '30%',
          right: '5%',
          bottom: '5%',
        },
        legend: {
          data: legendData,
          orient: 'vertical',
          left: 0,
          top: '8%',
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位/万元',
            // interval: 10000000000,
            // min: 0,
            // max: 100000000000,
            axisLabel: {
              formatter: '{value}',
            },
          },
          {
            type: 'value',
            name: '百分比',
            // interval: 10,
            // min: 0,
            // max: 100,
            axisLabel: {
              formatter: '{value} %',
            },
          },
        ],
        series,
      }
      option && myChart.setOption(option)
    },
  },
}
</script>
